<template>
  <div>
    <div class="reg_box">
      <div class="reg_left">
        <img src="/images/zcbj.png" alt="" />
      </div>
      <div class="reg_right">
        <div class="reg_title">
          <img src="/images/log.png" alt="" />
          <div class="reg_tip"><h2>小米账户</h2></div>
        </div>
        <div class="reg_content">
          <div class="conBox">
            <div class="cb_tilte">
              <div class="login">
                <a href="" @click="Login">登录</a>
              </div>
              <div class="register">
                <a href="" @click="Register">注册</a>
              </div>
            </div>
            <div class="cb_input">
              <div class="ipt">
                <input
                  type="text"
                  v-model="regData.name"
                  placeholder="请输入用户名"
                />
              </div>
              <div class="ipt">
                <input
                  type="password"
                  v-model="regData.password"
                  placeholder="请输入密码"
                />
              </div>
              <div class="ipt">
                <input
                  type="text"
                  v-model="regData.phone"
                  placeholder="请输入手机号码"
                />
              </div>
              <div class="btn">
                <button @click="OnRegister">注册</button>
              </div>
              <div class="cb_tip">
                <div class="cb_none"><a href="">收不到验证码?</a></div>
                <div class="cb_check">
                  <input type="checkbox" name="" id="" />
                  已阅读并同意小米账号<a href="">用户协议</a>和
                  <a href="">私隐政策</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRegister } from "../assets/js/request.js";
import Footer from "../components/Footer.vue";
export default {
  data() {
    return {
      regData: {
        name: "",
        password: "",
        phone: "",
        tyep: 1,
      },
    };
  },
  // 注册请求
  methods: {
    OnRegister() {
      // this.data.name = this.data.phone;
      getRegister(this.regData)
        .then((res) => {
          alert("注册成功");
          console.log(res);
          // this.$router.push("/login");
        })
        .catch((err) => {
          alert("手机号码已注册");
        });
    },
    Login() {
      this.$router.push("/login");
    },
    Register() {
      this.$router.push("/register");
    },
  },
  components: {
    Footer,
  },
};
</script>

<style lang ="scss" scoped>
@import "@/assets/scss/reset.scss";
.reg_box {
  width: 100%;
  display: flex;
  .reg_left {
    float: left;
    img {
      width: 455px;
      height: 700px;
    }
  }
  .reg_right {
    background-color: #f5f5f5;
    .reg_title {
      display: inline-block;
      float: left;
      img {
        margin: 20px;
        width: 50px;
        height: 50px;
        display: block;
        float: left;
      }
      .reg_tip {
        display: block;
        float: left;
        margin: 30px 10px;
      }
    }
    .reg_content {
      margin-top: 80px;
      width: 1080px;
      height: 610px;
      /* background-color: skyblue; */

      .conBox {
        width: 400px;
        height: 550px;
        margin: 10px auto;
        background-color: white;
        border-radius: 5px;
        /* background-color: aquamarine; */
        .cb_tilte {
          width: 400px;
          height: 50px;
          display: flex;
          /* background-color: red; */

          .login {
            display: block;
            font-size: 20px;
            margin: 15px;
            a {
              color: #ccc;
            }
          }
          .register {
            display: block;
            font-size: 20px;
            margin: 15px;
            padding-bottom: 30px;
            border-bottom: 5px solid orangered;
            a {
              color: black;
            }
          }
        }
        .cb_input {
          padding-top: 30px;
          .ipt {
            /* margin-top: 5px; */
            width: 250px;
            height: 50px;
            margin: 0 auto;
            input {
              margin-top: 25px;
              display: block;
              width: 250px;
              height: 50px;
              border-radius: 5px;
              border: none;
              background-color: #f5f5f5;
              padding-left: 10px;
            }
          }
        }
        .btn {
          width: 250px;
          height: 50px;
          margin: 0 auto;
          button {
            width: 250px;
            height: 50px;
            display: block;
            margin: 20px auto;
            background-color: orangered;
            color: white;
            border: none;
            border-radius: 5px;
          }
        }
        .cb_tip {
          width: 250px;
          height: 50px;
          margin: 10px auto;
          .cb_none {
            display: block;
            float: left;
            a {
              color: orangered;
            }
          }
          .cb_check {
            float: left;
            display: block;
            margin-top: 10px;
            text-align: left;
            a {
              color: #ccc;
            }
          }
        }
      }
    }
  }
}
</style>